<template>
    <el-card shadow='never' style='max-height: 70vh; overflow: auto'>
        <el-form ref='form' :model='form' :rules='rules' label-width='90px' :disabled='disabled'>
            <el-form-item label='id:' prop='id' v-show='false'>
                <el-input v-model='form.id' disabled />
            </el-form-item>
            <el-form-item label='所属用户:' prop='user_id'>
                <SelectPage v-model='form.user_id' placeholder='请选择所属用户' :url="'/admin/user/selectPage'"
                            show_field='nickname' show_id='uid' query_field='uid' :multiple='false' />
            </el-form-item>
            <el-form-item label='名称:' prop='name'>
                <el-input v-model='form.name' placeholder='名称' clearable />
            </el-form-item>

            <el-row :gutter='20'>
                <el-col :span='12'>
                    <el-form-item label='联系人姓名:' prop='address'>
                        <el-input v-model='form.linkman' placeholder='联系人姓名' clearable />
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='联系手机号:' prop='address'>
                        <el-input v-model='form.phone' placeholder='联系手机号' clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter='20'>
                <el-col :span='12'>
                    <el-form-item label='统一社会信用代码:' label-width='150px' prop='address'>
                        <el-input v-model='form.uscc' placeholder='统一社会信用代码' clearable />
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label='地址:' prop='address'>
                        <el-input v-model='form.address' placeholder='地址' clearable />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label='简介:' prop='about'>
                <el-input v-model='form.about' placeholder='简介' clearable />
            </el-form-item>
            <el-row :gutter='20'>
                <el-col :span='8'>
                    <el-form-item label='营业执照' prop='idcard_just'>
                        <ImageUpload v-model='form.pic1' />
                    </el-form-item>
                </el-col>
                <el-col :span='16'>
                    <el-form-item label='其他信息:' prop=''>
                        <div style='display:flex; ' v-if='form.ext_photo'>
                            <el-image style='margin-right:5px;height:80px;border-radius: 5px;border: 1px solid #c0c0c0;'
                                      v-for="(item, idx) in form.ext_photo.split(',')" :src='item'
                                      :key='idx'></el-image>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label='状态:' prop='status'>
                <el-select v-model='form.status' placeholder='请选择状态' clearable @change='onChangeStatus'>
                    <el-option v-for='(item, index) in status' :key='index' :label='item.label' :value='item.value' />
                </el-select>
            </el-form-item>
            <el-form-item label='审核时间:' prop='verify_time' v-if='false'>
                <el-date-picker v-model='form.verify_time' type='datetime' value-format='yyyy-MM-dd HH:mm:ss'
                                placeholder='选择审核时间' />
            </el-form-item>
            <el-form-item label='未通过原因:' prop='fail_content' v-if='form.status === 3'>
                <el-input type='textarea' v-model='form.fail_content' placeholder='请输入未通过原因' clearable />
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click='submitForm'>确认</el-button>
                <el-button type='warning' @click='cancel'>取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'

export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                status: [{ required: true, message: '请输入状态', trigger: 'blur' }],
                name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                fail_content: [{ required: true, message: '请输入未通过原因', trigger: 'blur' }],
            },
            form: {
                ext_photo: '',
            },
            // 区域选择配置
            areaOptions: regionData,
            status: [
                { label: '审核中', value: 1 },
                { label: '审核通过', value: 2 },
                { label: '审核失败', value: 3 },
            ],
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        nval.ext_photo = nval.ext_photo || ''
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        onChangeStatus() {
            this.$set(this.form, 'fail_content', '')
        },
    },
}
</script>
